<template>
  <div class="app-container">
    <img src="../../static/img/login-right.png" style="width:100%;margin:0 -10px">
    <van-form @submit="onSubmit">
      <van-field v-model="phone" name="phone" label="账号" placeholder="请输入账号"
        :rules="[{ required: true, message: '请输入账号' }]" />
      <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
        <a @click="login" style="float:right">还没有账号？马上注册</a>
      </div>
    </van-form>
    <xFooter />
  </div>
</template>
<script>
import { login } from "@/api/member/member"
import { Toast } from 'vant';
export default {
  data () {
    return {
      phone: '',
      password: '',
      userInfo: {
        id: ''
      }
    }
  },

  methods: {
    //   提交
    onSubmit (val) {
      login(val).then(res => {
        if (res.code == 200) {
          this.userInfo.id = res.data.id
          Toast.loading({
            message: '正在登陆...',
            forbidClick: true,
          });
          setTimeout(() => {
            Toast.clear();
            this.$router.push('/')
            Toast.success('登录成功');
            localStorage["userInfo"] = JSON.stringify(this.userInfo);
          }, 1000);
        } else {
          Toast.fail('账号或密码错误');
          return 0;
        }
      })
    },
    login () {

      this.$router.push('/register')
    }
  },
}
</script>
<style scoped>
a {
  font-size: 14px;
  cursor: pointer;
  color: rgb(51, 153, 255);
}
</style>